<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程 1 单元第 4 小节</title>
    <!-- * Style 开始 -->
    <!-- Icon 图标样式 -->
    <link rel="shortcut icon" type="image/x-icon" href="./img/Icon.ico">
    <!-- 禁止 Copy -->
    <link rel="stylesheet" type="text/css" href="./css/No_Copy.css">
    <!-- 初始样式 -->
    <link rel="stylesheet" type="text/css" href="./css/Demo.css">
    <!-- 颜色样式 -->
    <link rel="stylesheet" type="text/css" href="./css/TextColor.css">
    <!-- 通用样式 -->
    <link rel="stylesheet" type="text/css" href="./css/Style.css">
    <!-- 滚动条样式 -->
    <link rel="stylesheet" type="text/css" href="./css/NewScrollBarRules.css">
    <!-- ! Style 结束 -->

    <!-- * Script 开始 -->
    <!-- 数字脚本 -->
    <script type="text/javascript" src="./js/Demo.js"></script>
    <!-- 动态 title -->
    <script type="text/javascript" src="./js/Browse.js"></script>
    <!-- foot => 链接 文字 提示 -->
    <script type="text/javascript" src="./js/BottomA.js"></script>
    <!-- 颜色脚本 -->
    <script src="./js/Color.js"></script>
    <!-- ! Script 结束 -->
</head>

<body>
    <!-- 页眉部分 -->
    <div class="top">
        <h1>第一模块第四单元</h1>
    </div>
    <!-- ! 页眉部分 End -->

    <!-- 中间部分 -->
    <div class="demo">
        <!-- 第 01 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">移动端主流方案</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">1、单独制作移动端页面（主流）</div>
            <div class="da">2、响应式页面兼容移动端（其次）</div>
        </div>

        <!-- 第 02 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">移动端技术选型</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">1、流式布局（百分比布局）</div>
            <div class="da">2、flex 弹性布局（推荐）</div>
            <div class="da">3、rem 适配布局（推荐）</div>
            <div class="da">4、响应式布局</div>
            <div class="da c-green">※建议：选取一种主要技术类型，其他作为辅助类型，这种混合开发技术。</div>
        </div>

        <!-- 第 03 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 04 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 05 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 06 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 07 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 08 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 09 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 10 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 11 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 12 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 13 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 14 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 15 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 16 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 17 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>

        <!-- 第 18 组 -->
        <div class="demo-box">
            <!-- 提问部分 -->
            <div class="wen">
                <!-- 序号 -->
                <div class="num">Null</div>
                <!-- 问题 -->
                <div class="text-box">text</div>
            </div>
            <!-- 回答部分 -->
            <div class="da one-box">text</div>
        </div>
    </div>
    <!-- ! 中间部分 End -->

    <!-- 页脚部分 -->
    <div class="bootom">
        <div class="title-bottom">
            <span>友情链接</span>
        </div>
        <div class="text-box">
            <div class="text-one content-box">
                <p>内部链接</p>
                <a href="javascript:void(0);" onclick="oTiao(1, 1)">网站首页</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 2)">text</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 3)">text</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 4)">text</a>
                <a href="javascript:void(0);" onclick="oTiao(1, 5)">text</a>
            </div>
            <div class="text-two content-box">
                <p>外部链接</p>
                <a href="javascript:void(0);" onclick="oTiao(2, 1)">百度</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 2)">text</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 3)">text</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 4)">text</a>
                <a href="javascript:void(0);" onclick="oTiao(2, 5)">text</a>
            </div>
            <div class="text-three content-box">
                <p>快捷组件</p>
                <a href="javascript:void(0);" onclick="oTiao(3, 1)">Bootstrap</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 2)">Less</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 3)">Animate</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 4)">text</a>
                <a href="javascript:void(0);" onclick="oTiao(3, 5)">text</a>
            </div>
        </div>
        <div class="statement-box">
            作者：<a href="javascript:void(0);">苏常青</a>
            创建于：20XX年XX月XX日 X曜日
            联系方式：<a href="javascript:void(0);">2244915205</a>
        </div>
    </div>
    <!-- ! 页脚部分 End -->

</body>

</html>